<template>
  <div class="auto select-overspread">
    <validator name='v'>
      <ul class="nav nav-tabs" >
        <li role="presentation" class="active"><a href="#">银行信息</a></li>
      </ul>
      <form class="form-horizontal" style="margin-top:20px;flex: 1;">
        <div class="row">
          <div class="col-sm-4 form-group form-input-group"  :class="[$v.f_bank_name.required? 'has-error' : '']">
            <label for="f_adjustable_id" class="control-label">银行名称</label>
            <v-select :value.sync="model.f_bank_name" v-model="model.f_bank_name"
                :options='f_bank_name' placeholder='银行名称'
            close-on-select></v-select>
          </div>

          <div class="col-sm-4 form-group form-input-group"   :class="[$v.f_terminal_num.required ? 'has-error' : '']">
            <label for="f_terminal_num" class="control-label">终端号</label>
            <input type="text"  v-model="model.f_terminal_num"  v-validate:f_terminal_num="{required: true }" class="form-control" placeholder="终端号" v-el:name v-next-el="address">
          </div>

          <div class="col-sm-4 form-group form-input-group"  :class="[$v.f_dot_name.required ? 'has-error' : '']">
            <label for="f_area" class="control-label">网点名称</label>
            <input type="text" v-model="model.f_dot_name" v-validate:f_dot_name='{required: true }'
            class="form-control" placeholder="网点名称" v-el:type v-next-el="street" >
          </div>
        </div>

        <div class="row">
          <div class="col-sm-4 form-group form-input-group" :class="[$v.f_dot_address.required ? 'has-error' : '']">
            <label for="f_dot_address" class="control-label">网点地址</label>
            <input type="text"  v-model="model.f_dot_address"  v-validate:f_dot_address='{required: true }'
            class="form-control" placeholder="网点地址" v-el:style v-next-el="inpipe">
          </div>
          <div class="col-sm-4 form-group form-input-group" :class="[$v.f_link_man.required ? 'has-error' : '']">
            <label for="f_link_man" class="control-label">联系人</label>
            <input type="text"  v-model="model.f_link_man"  v-validate:f_link_man='{required: true }'
            class="form-control" placeholder="联系人" v-el:style v-next-el="inpipe">
          </div>

          <div class="col-sm-4 form-group form-input-group" :class="[$v.f_contact_number.required ? 'has-error' : '']">
            <label for="f_contact_number" class="control-label">联系电话</label>
            <input type="text"  v-model="model.f_contact_number"  v-validate:f_contact_number='{required: true }'
            class="form-control" placeholder="联系电话" v-el:style v-next-el="inpipe">
          </div>
        </div>
        <!-- <div class="row">
          <div class="col-sm-12 form-group form-input-group">
            <label for="f_remark" class="control-label">备注</label>
            <textarea class="form-control" v-model="model.f_remark"  rows="3" placeholder="备注"  v-el:remark ></textarea>
          </div>
        </div> -->
      </form>
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success " @click="confirm()" :disabled='!$v.valid || haveid || havaname' style="width:80px;margin-left:20px;" id="userfiles-adjTabBox-确认">保&nbsp;&nbsp;&nbsp;存</button>
        <button class="btn btn-default " @click="cancel()" style="width:80px;margin-left:20px;" id="userfiles-adjTabBox-取消">取&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import AppData from '../../../stores/AppData'
// import * as Util from '../../Util'
import co from 'co'
let getBankinfoGen = function * (self, val) {
  let getAreas = yield self.$post('/rs/search', {source: 'tool.getChildrenOfResName($银行$)', userid: ''}, {resolveMsg: null, rejectMsg: null})
  getAreas.data.forEach((item, next) => {
    let temp = {}
    temp.label = item.name
    temp.value = item.id
    console.log(self.model.f_bank_name)
    if (item.name===self.model.f_bank_name) {
        self.areas.push(temp)
    }
  })
  console.log('wo要的是' +   self.areas)
  console.log(self.areas.length);
  self.model.f_state ='停用'
  self.model.f_bank_id = self.areas[0].value
  console.log('获取的id'+  self.model.f_bank_id )
  self.$resetpost('rs/entity/t_bankdocking', self.model, {resolveMsg: '终端保存成功。', rejectMsg: '保存失败!!!'})
  .then(
    (res) => {
      self.$dispatch('success', '终端保存成功', self.model, res)
    }
  ).catch(
    (error) => {
      self.$dispatch('error', '终端保存失败', self.model, error)
    }
  )
  console.log('1232222222222222222')
}
export default {
  data () {
    return {
      model: {
        f_bank_name:'',
        f_bank_id:'',
        f_state:''
      },
      areas: [],
      sliceArea: [],
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.datatomodel()
    }
  },
  ready () {
    // if (thi) {
    //
    // }
    this.datatomodel()
    if (!this.data) {
      this.model.f_bank_name=''
    }
  },
  methods: {
    confirm () {
      this.model.f_bank_name.length>0?this.model.f_bank_name=this.model.f_bank_name[0]:this.model.f_bank_name
      this.getBankinfo(this.model.f_bank_name)
      // for (let i = 0; i < this.areas.length; i++) {
      //   console.log('...............................')
      //   if (this.areas[i].label === this.model.f_bank_name) {
      //     this.model.f_bank_id = this.areas[i].value
      //   }
      // }

    },
    datatomodel () {
      this.$nextTick(() => {
        this.model = Object.assign({}, this.model,this.data)
        this.model.f_bank_name = [this.model.f_bank_name]
        // this.model.f_manufacturer = [this.model.f_manufacturer]
        // this.model.f_operate_date ? this.changedate = false : this.changedate = true
      })
    },
    cancel () {
      this.$dispatch('close')
    },
    modify () {
      this.model = Object.assign({}, this.gasmessage)
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.data = {}
    },
    getBankinfo (val) {
      let getAll = getBankinfoGen(this, val)
      co(getAll)
    },
  },
  computed: {
    f_bank_name () {
      return AppData.getParam('银行名称')
    }
  }
}
</script>
